<template>
  <div class="empty-item">
  </div>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue'
import { type Graph, Node } from '@antv/x6'
import { handleEdgeAnnotation } from '@/utils/x6/animation'

const getGraph = inject('getGraph') as () => Graph
const getNode = inject('getNode') as () => Node
const node = getNode()
const graph = getGraph()

const inEdges = graph.getConnectedEdges(node, {
  incoming: true
})

const handleEdges = function(isOpen: boolean) {
  const outEdges = graph.getConnectedEdges(node, {
    outgoing: true
  })
  outEdges.forEach(edge => {
    handleEdgeAnnotation(edge, isOpen)
  })
}

const inOpen = inEdges?.map(edge => edge.getData()?.isOpen).some((open) => open)
handleEdges(inOpen)

inEdges.forEach(edge => {
  edge.on('change:data', ({ cell }) => {
    const inOpen = inEdges?.map(edge => edge.getData()?.isOpen).some((open) => open)
    console.log(inOpen)
    handleEdges(inOpen)
  })
})


</script>

<style scoped lang="scss">
.empty-item {
  height: 100%;
  background-image: linear-gradient(0deg,
    #d4dff3 0%,
    #eef5ff 50%,
    #d4dff3 100%),
  linear-gradient(
      #d7e1f3,
      #d7e1f3);
  background-blend-mode: normal,
  normal;
}
</style>
